<template>
	<view class="recharge_container">
		<u-row justify="center">
			<u-col span="11">
				<u--text mode="price" size="25" type="info" :text="balance" />
			</u-col>
		</u-row>
		<view class="body_cell">
			<view class="body_cell_item" v-for="(item,index) in moneyList" :key="index">
				<u-button type="primary" :text="item" @click="openModal(item)"></u-button>
			</view>
		</view>
		<u-modal :show="modal.show" :title="modal.title" :closeOnClickOverlay="true" :showCancelButton="true"
			@confirm="modalConfirm" @cancel="modalCancelClose" @close="modalCancelClose">
			<view class="slot-content">
				<u--image :showLoading="true" src="/static/充值plus.png" width="80px" height="80px" @click="click">
				</u--image>
				<rich-text :nodes="modal.content"></rich-text>
			</view>
		</u-modal>
		<appreciation-code></appreciation-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				moneyList: [100, 200, 300, 400, 500, 600],
				balance: 0,
				modal: {
					show: false,
					title: '小花充值',
					content: '',
					money: ''
				},
			};
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			uni.getStorage({
				key: 'balance',
				success: res => {
					this.balance = res.data;
					uni.hideLoading();
				}
			})
		},
		onShow() {
		},
		methods: {
			openModal(money) {
				this.modal.show = true;
				this.modal.content = `充值金额<b style='color: #f29100;'> ¥` + money + `</b>`;
				this.modal.money = money;
			},
			modalConfirm() {
				this.modal.show = false;
				this.recharge(this.modal.money);
			},
			modalCancelClose() {
				this.modal.show = false;
			},
			recharge(money) {
				let _this = this;
				uni.getStorage({
					key: 'token',
					success: res => {
						this.$axios.post('/PaymentScanCode/recharge', {
							money: money
						}).then(res => {
							this.balance = res.data.data.balance;
							uni.setStorage({
								key: "balance",
								data: res.data.data.balance
							})
							uni.showToast({
								icon: 'success',
								title: '充值成功',
								duration: 2000
							});
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.recharge_container {
		.body_cell {
			padding: 10rpx;
			display: flex;
			justify-content: space-evenly;
			flex-wrap: wrap;

			.body_cell_item {
				width: 240rpx;
				margin: 8rpx;
			}
		}
	}
</style>
